import React from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import { Avatar, Button, Card, Descriptions, Typography, Tag } from 'antd';
import { history, useModel } from '@umijs/max';
import { UserOutlined, EditOutlined, MailOutlined, PhoneOutlined } from '@ant-design/icons';
import styles from './index.less';
import defaultAvatar from '../assets/icon-user.jpeg';

const { Title, Text } = Typography;

/**
 * 个人资料展示页面
 * 只用于展示用户基本信息，提供跳转到编辑页面的入口
 */
const ProfileView: React.FC = () => {
  const { initialState } = useModel('@@initialState');
  const { currentUser } = initialState || {};

  // 跳转到个人资料编辑页面
  const handleEditProfile = () => {
    history.push('/profile/edit');
  };

  // 角色文本映射
  const getRoleText = (role: any) => {
    // [MOD] 根据正确的role值映射用户身份
    if (role === 0 || role === '0') {
      return { text: '管理员', color: 'blue' };
    } else if (role === 2 || role === '2') {
      return { text: 'VIP用户', color: 'gold' };
    } else {
      // 默认为普通用户
      return { text: '普通用户', color: 'green' };
    }
  };

  return (
    <PageContainer
      header={{
        title: '个人资料',
        breadcrumb: {}, // 设置空对象隐藏面包屑
        ghost: true, // 启用透明模式
      }}
    >
      <div className={styles.container}>
        <Card className={styles.card}>
          <div className={styles.userHeader}>
            <div className={styles.avatarContainer}>
              <Avatar
                size={100}
                icon={<UserOutlined />}
                src={currentUser?.avatar || defaultAvatar}
                className={styles.avatar}
              />
            </div>

            <div className={styles.userInfo}>
              <div className={styles.titleRow}>
                <Title level={3}>{currentUser?.username || '用户'}</Title>
                <Button 
                  type="primary" 
                  icon={<EditOutlined />}
                  onClick={handleEditProfile}
                  className={styles.editButton}
                  size="middle"
                >
                  编辑资料
                </Button>
              </div>
              <Text type="secondary" className={styles.accountText}>
                账号: {currentUser?.account}
              </Text>

              <div className={styles.roleTag}>
                <Tag color={getRoleText(currentUser?.role).color}>
                  {getRoleText(currentUser?.role).text}
                </Tag>
              </div>
            </div>
          </div>

          <div className={styles.detailsContainer}>
            <Descriptions title="基本信息" bordered column={1} className={styles.descriptions}>
              <Descriptions.Item label="用户名">
                {currentUser?.username || '未设置'}
              </Descriptions.Item>
              <Descriptions.Item label="账号">{currentUser?.account || '未设置'}</Descriptions.Item>
              <Descriptions.Item label="邮箱">
                {currentUser?.email ? (
                  <span>
                    <MailOutlined style={{ marginRight: 8 }} />
                    {currentUser.email}
                  </span>
                ) : (
                  '未设置'
                )}
              </Descriptions.Item>
              <Descriptions.Item label="手机号">
                {currentUser?.phone ? (
                  <span>
                    <PhoneOutlined style={{ marginRight: 8 }} />
                    {currentUser.phone}
                  </span>
                ) : (
                  '未设置'
                )}
              </Descriptions.Item>
              <Descriptions.Item label="注册时间">
                {currentUser?.createTime
                  ? new Date(currentUser.createTime).toLocaleString()
                  : '未知'}
              </Descriptions.Item>
            </Descriptions>
          </div>
        </Card>
      </div>
    </PageContainer>
  );
};

export default ProfileView;
